<template>
  <!-- 条件查询组件 -->
  <el-form style="margin: 40px" :model="queryArgs" label-width="100px" :size="'large'" :inline="true" status-icon
    width="auto">
    <div style="display: flex; justify-content: space-between; width: 100%">
      <!-- 条件查询选项部分 -->
      <div style="
          display: flex;
          min-width: 800px;
          justify-content: space-between;
          flex-wrap: wrap;
        ">
        <!-- 学生名称输入框 -->
        <el-form-item label="学生名称" style="width: 40%; min-width: 20%">
          <el-input v-model="queryArgs.userName" clearable />
        </el-form-item>

        <!-- 班级名称选择框 -->
        <el-form-item label="班级名称" style="width: 40%; min-width: 20%">
          <el-select v-model="queryArgs.groupName" clearable>
            <el-option v-for="option in classOptions" :label="option" :value="option" :key="option" />
          </el-select>
        </el-form-item>

        <!-- 考试成绩范围滑块 -->
        <el-form-item label="考试成绩" style="width: 40%; min-width: 30%">
          <el-slider v-model="queryArgs.scoreRange" range :step="1" show-stops :max="100" :min="0" />
        </el-form-item>
      </div>

      <!-- 提交与取消按钮 -->
      <div style="display: flex; flex-direction: column; align-items: flex-end">
        <el-form-item>
          <el-button type="primary" @click="querybtn">查 询</el-button>
        </el-form-item>
        <el-form-item style="margin-top: 10px">
          <el-button type="info" @click="queryReset">重 置</el-button>
        </el-form-item>
      </div>
    </div>
  </el-form>

  <!-- 成绩表格组件 -->
  <el-table v-if="tableData.list.length >= 0" :size="'large'" :data="tableData.list"
    style="width: 100%; margin: 10px auto; border-radius: 5px" stripe hover-effect>
    <!-- 序号列 -->
    <el-table-column type="index" label="序号" width="200" />

    <!-- 学生名称列 -->
    <el-table-column prop="userName" label="学生名称" style="width: 15%" />

    <!-- 考试成绩列 -->
    <el-table-column prop="totalScore" label="考试成绩" style="width: 15%" >
      <template #default="scope">
      <span v-if="scope.row.totalScore != null">{{ scope.row.totalScore }}</span>
      <span v-else>暂无成绩</span>
    </template>
    </el-table-column>

    <!-- 班级名称列 -->
    <el-table-column prop="groupName" label="班级名称" style="width: 15%" />
  </el-table>

  <!-- 空数据提示 -->
  <div v-else-if="isQueryExecuted" class="empty-data提示" style="text-align: center; margin: 50px 0">
    <el-icon>
      <CircleClose />
    </el-icon>
    <p style="margin-top: 10px; color: #909399">未查询到符合条件的成绩数据</p>
  </div>
  <!-- 分页组件 -->
  <div v-if="tableData.total >= 0" style="margin: 20px 0; display: flex; justify-content: center;">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="queryArgs.pageNum" :page-sizes="[10, 20, 30]" :page-size="queryArgs.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
    </el-pagination>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import TestScoreApi from "../api/Backend/testScoreApi";
import { CircleClose } from "@element-plus/icons-vue";
import { log } from "echarts/types/src/util/log.js";

// 定义接收父页面传递的contestId
const props = defineProps({
  contestId: {
    type: Number,
    required: true
  }
})

// 查询参数对象
const queryArgs = ref({
  userName: "",
  groupName: "",
  minScore: 0,
  maxScore: 100,
  scoreRange: [0, 100],
  pageNum: 1,
  pageSize: 10,
  contestId:  props.contestId // 初始化contestId
});

// 表格数据
const tableData = ref({
  list: [],
  total: 0
});

// 班级选项
const classOptions = ref([]);

// 查询是否已执行
const isQueryExecuted = ref(false);

// 重置查询表单
const queryReset = () => {
  queryArgs.value = {
    userName: "",
    groupName: "",
    minScore: 0,
    maxScore: 100,
    scoreRange: [0, 100],
    contestId: props.contestId, // 重置时保持contestId不变
  };
  // pageNum: 1,
  // pageSize: 10,
  // tableData.value.list = [];
  // tableData.value.total = 0;
  // isQueryExecuted.value = false;
};
//处理每页条数变化
const handleSizeChange = (newSize: number) => {
  queryArgs.value.pageSize = newSize;
  performQuery();
};
// 处理页码变化
const handleCurrentChange = (newPage: number) => {
  queryArgs.value.pageNum = newPage;
  performQuery();
};

// 查询按钮处理
const querybtn = () => {
  //重置页码为1
  queryArgs.value.pageNum = 1;
  // 从滑块值更新最小和最大分数
  queryArgs.value.minScore = queryArgs.value.scoreRange[0];
  queryArgs.value.maxScore = queryArgs.value.scoreRange[1];

  // 发送查询请求
  performQuery();
};
// 获取班级列表
const fetchClassOptions = () => {
  TestScoreApi.getAllGroup(props.contestId) // 假设contestId为1
    .then((res) => {
      console.log("班级列表获取成功:", res);
      classOptions.value = res.data || [];
    })
    .catch((err) => {
      console.error('获取班级列表失败:', err);
      classOptions.value = ['获取班级列表失败'];
    });
};

// 执行查询
const performQuery = () => {
  // 构建请求参数
  const params = {
    contestId: props.contestId, // 使用父组件传递的contestId
    userName: queryArgs.value.userName,
    groupName: queryArgs.value.groupName,
    minScore: queryArgs.value.minScore,
    maxScore: queryArgs.value.maxScore,
    pageNum: queryArgs.value.pageNum,
    pageSize: queryArgs.value.pageSize

  };

  // 调用API查询全部成绩
  TestScoreApi.gteAllScore(params)
    .then((res) => {
      // 处理查询结果
      //打印返回值
      console.log("返回值", res);
      isQueryExecuted.value = true;
      tableData.value.list = res.data.list || [];
      tableData.value.total = res.data.total || 0;
    })
    .catch((err) => {
      console.error('查询失败:', err);
      isQueryExecuted.value = true;
    });
  // 调用API查询全部班级

};

// 监听contestId变化，更新查询
watch(() => props.contestId, (newContestId) => {
  queryArgs.value.contestId = newContestId;
  performQuery();
  fetchClassOptions();
});

// 页面加载时执行初始查询
onMounted(() => {
  performQuery();
  fetchClassOptions();
});
</script>

<style>
.el-select {
  --el-select-width: 220px;
}

.empty-data提示 {
  padding: 40px 0;
  border-radius: 4px;
  border: 1px dashed #dcdfe6;
  background-color: #f5f7fa;
}
</style>